<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="geometry" content="multiple">
  <link rel="stylesheet" href="./assets/common.css">
  <title>Multiple Plot</title>
</head>

<body>
<div id="canvas"></div>
<script src="./assets/jquery-3.2.1.min.js"></script>
<script src="../build/g2.js"></script>
<script>
  const data = [{ reportDate: '2017-05-31', alias: '公共服务应用', count: 1, type: '1' }, { reportDate: '2017-06-05', alias: '公共服务应用', count: 1, type: '1' }, { reportDate: '2017-06-05', alias: '棱镜应用', count: 2, type: '1' }, { reportDate: '2017-06-06', alias: 'AntV应用', count: 3, type: '1' }, { reportDate: '2017-06-06', alias: 'awatch', count: 1, type: '1' }, { reportDate: '2017-06-06', alias: '公共服务应用', count: 2, type: '1' }, { reportDate: '2017-06-06', alias: '凤蝶应用', count: 4, type: '1' }, { reportDate: '2017-06-06', alias: '棱镜应用', count: 8, type: '1' }, { reportDate: '2017-06-07', alias: 'AntV应用', count: 1, type: '1' }, { reportDate: '2017-06-07', alias: 'Basement-应用', count: 1, type: '1' }, { reportDate: '2017-06-07', alias: '凤蝶应用', count: 2, type: '1' }, { reportDate: '2017-06-07', alias: '棱镜应用', count: 3, type: '1' }, { reportDate: '2017-06-08', alias: '棱镜应用', count: 1, type: '1' }, { reportDate: '2017-06-09', alias: '棱镜应用', count: 1, type: '1' }, { reportDate: '2017-06-13', alias: '公共服务应用', count: 1, type: '1' }, { reportDate: '2017-06-13', alias: '棱镜应用', count: 1, type: '1' }, { reportDate: '2017-06-15', alias: 'awatch', count: 1, type: '1' }, { reportDate: '2017-06-19', alias: '凤蝶活动应用', count: 2, type: '1' }, { reportDate: '2017-06-23', alias: 'awatch', count: 1, type: '1' }, { reportDate: '2017-06-28', alias: 'Antstar-应用', count: 2, type: '1' }, { reportDate: '2017-06-30', alias: '公共服务应用', count: 1, type: '1' }, { reportDate: '2017-08-09', alias: null, count: 3, type: '1' }, { reportDate: '2017-08-21', alias: null, count: 3, type: '1' }, { reportDate: '2017-08-22', alias: null, count: 5, type: '1' }, { reportDate: '2017-08-22', alias: null, count: 11, type: '2' }, { reportDate: '2017-08-23', alias: null, count: 2, type: '2' }, { reportDate: '2017-08-24', alias: null, count: 2, type: '2' }, { reportDate: '2017-08-25', alias: null, count: 4, type: '2' }, { reportDate: '2017-08-28', alias: '凤蝶活动应用', count: 1, type: '1' }, { reportDate: '2017-08-28', alias: '棱镜应用', count: 1, type: '1' }, { reportDate: '2017-08-29', alias: null, count: 3, type: '2' }, { reportDate: '2017-08-30', alias: null, count: 9, type: '2' }, { reportDate: '2017-08-30', alias: '凤蝶应用', count: 2, type: '1' }, { reportDate: '2017-08-30', alias: '凤蝶活动应用', count: 4, type: '1' }, { reportDate: '2017-08-30', alias: '棱镜应用', count: 15, type: '1' }, { reportDate: '2017-08-31', alias: null, count: 10, type: '2' }, { reportDate: '2017-08-31', alias: '棱镜应用', count: 1, type: '1' }, { reportDate: '2017-09-01', alias: null, count: 1, type: '2' }, { reportDate: '2017-09-01', alias: '凤蝶活动应用', count: 1, type: '1' }, { reportDate: '2017-09-01', alias: '棱镜应用', count: 2, type: '1' }];

  const chart = new G2.Chart({
    container: 'canvas',
    forceFit: true,
    height: window.innerHeight
  });

  //    chart.tooltip(false);
  chart.source(data);
  chart.line().position('reportDate*count').color('alias');

  chart.render();
</script>
</body>

</html>
